<template>
  <!--中间部分-->
    <div id="center">
        <div style="float:left;margin-left:50px;">
            <el-tabs tab-position="left">
                <el-tab-pane label="首页">
                    <div id="ccenter"><img src="@/style/images/消息轮播1.jpg"></div>
                    </el-tab-pane>
                <el-tab-pane label="我的班级"><Class/></el-tab-pane>
                
                <el-tab-pane label="我的申请">
                    <Apply/>
                </el-tab-pane>
                <el-tab-pane label="我的教材">
                    <Return/>
                </el-tab-pane>
                <el-tab-pane label="我的购物车">
                    <Purchase/>
                </el-tab-pane>
                
            </el-tabs>
        </div>
        <div id="cright" style="float:right;">
            <div class="card">
                <div class="card-body">
                    <p class="card-text">微信扫一扫，关注最新消息！！！</p>
                </div>
            </div>
            <!-- 添加新书预售 -->
            <div id="addBooks">
                <p>二维码</p>
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner">
                    <div class='carousel-item active'>
                        <a href="#"><img :src=imgList class="d-block w-100" width="300px" height="300px" alt="新书"></a>
                    </div>
                </div>
            </div>

            <!-- 畅销榜 -->
            <div>
                <p style="font-size: 18px; font-weight: 600;text-align: center;margin-top: 45px; padding-bottom: 0px;">
                    辅助教材推荐</p>
            </div>
            <div id="changxb">
                <ul class="nav flex-column" style="float:left;">
                    <!-- 修改字体 -->
                    <!--    此处要读数据十条    -->
                    <li v-for="o in 5" :key="o" class="nav-item changefont" style="margin-left:10px;margin-top:20px;">
                        <a class="nav-link active" href="#" text="fdsag">adsfdsa</a>
                    </li>
                </ul>
            </div>

        </div>
        
        
    </div>
</template>

<script>

import '@/style/css/home.css'
import $ from 'jquery'
import Class from '@/views/user/class.vue'
import Apply from '@/views/user/apply.vue'
import Return from '@/views/user/returnOrder.vue'
import Purchase from '@/views/purchase/index.vue'

export default {
    name:'Center',
    data(){
        return{
            imgList:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600612291104&di=83089a8689d853b104eef8781dd3e1b9&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2461546624%2C3834138131%26fm%3D214%26gp%3D0.jpg",
        };
    },
    components:{
        Class,
        Purchase,
        Apply,
        Return
    },
    mounted(){
        
    },
    methods:{
        
    }
}
</script>

<style>
    a{
       text-decoration: none;
    }
    li{
       list-style: none;
    }
</style>